/*
 * @Author: your name
 * @Date: 2021-12-25 02:13:31
 * @LastEditTime: 2021-12-25 13:51:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\50htmljs\drink\script.js
 */
const cups = document.querySelector('.cups')
const remained = document.getElementById('remained')
const percentage = document.getElementById('percentage')
const liters = document.getElementById('liters')

cups.addEventListener('click',(e)=>{
    if (e.target.classList.contains) {
        // console.log(e.target.classList.contains)
        const index = e.target.getAttribute('data-index')
        // console.log(index)
        hightCups(Number(index))
    }
})

function hightCups(index){
    const smallCups = cups.children
    // console.log(smallCups)
    // console.log([...smallCups])
    if (index === 7 && smallCups[index].classList.contains('full') ) {
        index --
    }else if(smallCups[index].classList.contains('full') && !smallCups[index+1].classList.contains('full')){
        index -- 
    }
    

   let smallCupsArray = [...smallCups]
   smallCupsArray.forEach((item,idx) => {
        // console.log(item,index)
        if(idx <= index){
            item.classList.add('full')
        }else{
            item.classList.remove('full')
        }

    });

    updateCup(index)

}

function updateCup(index){
    // console.log(index)
    let fullCup  =  index + 1
    // console.log(fullCup)
    let allCup = cups.children.length
    // console.log(allCup)
    if (fullCup != 0 ) {
        percentage.style.height = `${fullCup / allCup *330}px`
        percentage.innerText = `${fullCup / allCup *100}%`
        percentage.style.visibility = 'visible'
    } else {
        percentage.style.visibility = 'hidden'
        percentage.style.height = 0
    }

    if (fullCup === allCup) {
        remained.style.visibility = 'hidden'
        remained.style.height = 0
    } else {
        remained.style.visibility = 'visible'
        liters.innerText = `${2 - (250 * fullCup / 1000)}L`
    }


}
